<template>
    <div class="navbar">
        <div class="container flex items-center h-[60px]">
            <n-button text class="!text-xl !font-bold">二木素材网</n-button>

            <ui-menu>
                <ui-menu-item v-for="(item, index) in menus" :key="index" :active="isMenuItemActive(item)"
                    @click="handleOpen(item.path , item.name)">
                    {{ item.name }}
                </ui-menu-item>
            </ui-menu>
            <!-- 占位符 -->
            <div class="ml-auto mr-3" ></div>

            <nuxt-link to="/vipPrice"   >
                <div class="nav-item-txt">个人VIP</div>
            </nuxt-link>
            <nuxt-link to="/vipPrice"   >
                <div class="nav-item-txt">企业VIP</div>
            </nuxt-link>
            <nuxt-link to="/login"   v-if="!user">
                <n-button secondary strong>登录</n-button>
            </nuxt-link>

            <n-dropdown v-else :options="userOptions" @select="handleSelect">
                <n-avatar round size="small"
                    :src="user.avatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'" />
            </n-dropdown>
        </div>
    </div>
    <div class="w-[100%] h-[80px]"></div>
 
</template>
<script setup>
import {
    NButton,
    NIcon,
    NDropdown,
    NAvatar,
    createDiscreteApi
} from "naive-ui"
import {
    Search
} from "@vicons/ionicons5"

import Darkmode from 'darkmode-js';

const user = useUser()

const route = useRoute()
const menus = [{
    name: "首页",
    path: "/"
}, {
    name: "分类1",
    path: "/category-1/1111222",
    match: [{
        name: "category-1"
    }]
}, {
    name: "分类2",
    path: "/category-2/3333333",
    match: [{
        name: "category-2",
        params: {
            type: "group"
        }
    }]
},  ]
function handleOpen(path,name) {
    if(path === '/'){
        navigateTo(path)
    }else{
        openSearch(path , name)
    }
}
const isMenuItemActive = (item) => {
    if (item.match) {
        let i = item.match.findIndex(o => {
            let res = true
            if (o.params && typeof o.params === "object") {
                res = (Object.keys(o.params).findIndex(k => route.params[k] == o.params[k])) != -1
            }
            return o.name == route.name && res
        })
        return i != -1
    }
    return route.path == item.path
}

const userOptions = [{
    label: "用户中心",
    key: "center",
}, {
    label: "退出",
    key: "logout",
}]



const handleSelect = (k) => {
    switch (k) {
        case "logout":
            const { dialog } = createDiscreteApi(["dialog"])
            dialog.warning({
                content: "是否要退出登录？",
                positiveText: "退出",
                negativeText: "取消",
                onPositiveClick: async () => {
                    await useLogout()
                },
            });
            break;
        case "center":
            navigateTo({
                path: "/user/info/1"
            })
            break;
    }
}

const openSearch = (path , name)=>{
    navigateTo({
      name: "search-type-page",
      params: {
         type: "course",
         page: 1,
      },
      query: {
         keyword: name,
      },
   })
}

</script>
<style>
.navbar {
    z-index: 1000;
    @apply bg-white fixed top-0 left-0 right-0 shadow-sm;
}
.darkmode-toggle{
    z-index: 1001;
}
.nav-item-txt{
    @apply pr-6
}
</style>
